<template>
  <div class="mapWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <!--<i @click='screenfullMap' :class="iconFull"></i>-->
      </div>
      <div  class="colorWrapRack">
        <div v-for="(item,index) in colorslist" :key="index">
          <span class="colorlist" :style="'background-color:'+item.color"></span><span
          class="labelStyle">{{item.label}}</span>
        </div>
        <div ><span><img src="./images/Intelligent.png" height="18" width="25"/></span>
          <span class="labelStyle">站点设施</span></div>
      </div>
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>



  import shaheData from '../../../store/data'
  import {transform, WGS84, BD09} from '../../utils/gcoord/index.js'
  export default {
    props: ["railInfo", "siteInfo", "siteCount", "urgentCount"],
    data () {
      return {
        map: "",
        iconFull: "iconfont icon-quanping",
        markers: [],
        ply: [],
        colorslist: [{
          color: '#53CB63',
          label: '停放区'
        }, {
          color: '#D34FFE',
          label: '严管区域'
        }, {
          color: '#FF5050',
          label: '临时严管区域'
        }, {
          color: '#FF9E36',
          label: '精细试点严管区域'
        }, {
          color: '#3A76FF',
          label: '总量控制区域'
        }],

      }
    },
    mounted(){

      document.querySelector(".mapWrap").style.height = document.querySelector(".moveControlWrap").clientHeight - 85 + "px"
      this.getHotMap()
    },
    created(){
      this.getHotMap()

    },

    methods: {
      //全市百度提取区域经纬度
      getBoundaryDemo() {
        let _this=this
        var bdary = new BMap.Boundary();
//        var name = document.getElementById("districtName").value;
       let arr= ['深圳市南山区','深圳市宝安区','深圳市福田区','深圳市龙岗区','深圳市罗湖区','深圳市龙华区','深圳市盐田区','深圳市坪山区','深圳市光明区','深圳市大鹏区']
//        var name = "深圳市龙岗区";
        arr.forEach(item=>{
          bdary.get(item, function (rs) {       //获取行政区域
            var fileName = "";
//          var newFileObject = fso.CreateTextFile(folderName + "\\" + name + ".txt", true);
//            _this.map.clearOverlays();        //清除地图覆盖物
            var count = rs.boundaries.length; //行政区域的点有多少个
            for (var i = 0; i < count; i++) {
              var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
              _this.map.addOverlay(ply);  //添加覆盖物
              _this.map.setViewport(ply.getPath());    //调整视野
            }

            /* newFileObject.write(rs.boundaries[0]);
             newFileObject.Close();*/
          });
        })

      },
      //清除指定覆盖物
      deletePoint(){
        let allOverlay = this.map.getOverlays();
        for (var i = 0; i < allOverlay.length -1; i++){
          if(allOverlay[i].getLabel().content == "我是id=1"){
            this.map.removeOverlay(allOverlay[i]);
            return false;
          }
        }
      },
      //百度提取区域经纬度
      getBoundary(name) {
        let _this=this,bdary = new BMap.Boundary();
          bdary.get(name, function (rs) {       //获取行政区域
//            _this.map.clearOverlays();        //清除地图覆盖物
            _this.map.removeOverlay(_this.ply)  //清除指定的
//            _this.map.clearOverlays()   //清除所画
            var count = rs.boundaries.length; //行政区域的点有多少个
            for (var i = 0; i < count; i++) {
              _this.ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000",fillColor:'white',fillOpacity:0.1}); //建立多边形覆盖物
              _this.map.addOverlay(_this.ply);  //添加覆盖物
              _this.map.setViewport(_this.ply.getPath());    //调整视野
//              _this.addMarkes(_this.railInfo, 0) //后添加解决层级关系
//              _this.map.setZoom(13)  //设置缩放
            }
//            console.log(rs.boundaries)
          });


      },

      screenfullMap(){
        if (this.iconFull == "iconfont icon-quanping") {
          this.iconFull = "iconfont icon-quxiaoquanping"
        } else if (this.iconFull == "iconfont icon-quxiaoquanping") {
          this.iconFull = "iconfont icon-quanping"
        }
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
         /* setTimeout(() => {
            this.getHotMap();
          }, 100)
          setTimeout(() => {
            this.getHotMap();
          }, 1000)*/
        }
      },
      getHotMap(){

        let _this = this

        _this.map = new BMap.Map("mapContainer", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });          // 创建地图实例


        _this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        });

        _this.map.centerAndZoom(new BMap.Point(114.1173442697, 22.7412900656), 11);             // 初始化地图，设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件

        _this.addMarkes(_this.siteInfo, 1)
        _this.addMarkes(_this.railInfo, 0)


//        原始转百度
        let arr = []

        shaheData.shaheData.forEach((item) => {
//          let info=transform(item, WGS84, BD09)
          arr.push(new BMap.Point(item[0], item[1]))
        })
        let vectorMarker1 = new BMap.Polygon(arr, {
          strokeColor: "blue",    //边线颜色。
          fillColor: "#E0AA98",      //填充颜色。当参数为空时，圆形将没有填充效果。
          strokeWeight: 1,       //边线的宽度，以像素为单位。
          strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
          fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
          strokeStyle: 'solid' //边线的样式，solid或dashed。
        });  //创建多边形
        this.map.addOverlay(vectorMarker1);

      },

      addMarkes(dataInnfo, key){
        let _this = this
        for (var i = 0; i < dataInnfo.length; i++) {
          //设置marker图标为水滴
          if (key == 0) {//围栏
            if (dataInnfo[i].position && dataInnfo[i].position.length > 2) {
              var arr = []
              dataInnfo[i].position.forEach((item) => {
                arr.push(new BMap.Point(item.lng, item.lat))
              })
              vectorMarker = new BMap.Polygon(arr, {
                strokeColor: "#00B419",    //边线颜色。
                fillColor: "#A5F2B0",      //填充颜色。当参数为空时，圆形将没有填充效果。
                strokeWeight: 1,       //边线的宽度，以像素为单位。
                strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
                fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
                strokeStyle: 'solid' //边线的样式，solid或dashed。
              });  //创建多边形

            }

          } else if (key == 1) {//站点
            var vectorMarker = new BMap.Marker(new BMap.Point(dataInnfo[i].lng, dataInnfo[i].lat), {
              // 指定Marker的icon属性为Symbol
              icon: new BMap.Icon(`./static/images/Intelligent.png`, new BMap.Size(34, 18)
              )
            });
          }

          _this.map.addOverlay(vectorMarker);
          _this.addClickHandler(vectorMarker, dataInnfo[i], key);
        }
      },
      addClickHandler (marker, info, key) {
        let _this = this
        marker.addEventListener("click", function (e) {
//            console.log(info)
            var point = e.point

            let content, name = info.name

            //创建检索信息窗口对象
            this.searchInfoWindow = null;


            /*content = '<div style="margin:0;line-height:25px;padding-left: 10px;font-size: 14px;">' +
             '<div style="float:right;zoom:1;overflow:hidden;width:50px;line-height:55px;margin-left:3px;"><img  src="./static/images/Intelligent.png" alt="" style="width:34px;height:22px;cursor: pointer;vertical-align: middle;"/></div>' +
             '车桩数量：'+4+'<br/>停车数量：'+6+'<br/>' +
             '</div>';*/


            content = '<div class="mapTopWrap" style="border-bottom:1px solid #EFEEF3;"> <div class="mapBaseTitle" style="">基本信息</div> <div style="float: left;line-height: 20px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">区域编号：' + info.siteNo + '</div> <div style="padding: 0 10px;color: #50545D;">车辆阀值：100</div> <div style="padding: 0 10px;color: #50545D;">有效期：2019-08-10</div> </div> </div> <div class="mapTopWrap"> <div class="mapBaseTitle" >车辆信息</div> <div style="float: left;line-height: 20px;border-left: 1px solid #EFEEF3; "> <div style="padding: 0 10px;color: #50545D;">停放数量(估算)：20</div> <div style="padding: 0 10px;color: #50545D;">摩拜：13</div> <div style="padding: 0 10px;color: #50545D;">OFO：7</div> </div> </div>'


            this.searchInfoWindow = new BMapLib.SearchInfoWindow(this.map, content, {
              title: name,      //标题
//              width  : 80,             //宽度
//              height : 60,              //高度
              panel: "panel",         //检索结果面板
              enableAutoPan: true,     //自动平移
              offset: new BMap.Size(-20, -20),
              searchTypes: [
                /*BMAPLIB_TAB_SEARCH,   //周边检索
                 BMAPLIB_TAB_TO_HERE,  //到这里去
                 BMAPLIB_TAB_FROM_HERE //从这里出发*/
              ]
            });
            this.marker = new BMap.Marker(point); //创建marker对象
            this.searchInfoWindow.open(this.marker)


//            let arr = JSON.parse(this.getLabel().content)
//            let Mapurl = process.env.API_HOST + `ulinkUrgentArea/getInfo?${arr[1] == 0 ? "urgentId" : "siteId"}=${arr[0]}`
            /* this.axios.get(Mapurl, {withCredentials: true})
             .then(response => {
             const result = response.data
             if (result.state === 0) {
             var p = e.target;
             var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
             if (arr[1] == 0) {
             var infoWindow = new BMap.InfoWindow("<div style='background-color: #eee;box-shadow: 3px 3px 3px #eee;'>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>围栏名: " + result.data.areaName + "</div>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>围栏容量: " + result.data.allowCount + "</div>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>停车数: " + result.data.parkingCount + "</div>" +
             "</div>", {
             offset: new BMap.Size(0, -5),
             });  // 创建信息窗口对象
             } else {
             var infoWindow = new BMap.InfoWindow("<div style='background-color: #eee;box-shadow: 3px 3px 3px #eee;'>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>站点名: " + result.data.siteName + "</div>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>车桩数: " + result.data.rackTotal + "</div>" +
             "<div style='margin:0 0 5px 0;padding:0.2em 0'>停车数: " + result.data.parkingCount + "</div>" +
             "</div>", {
             offset: new BMap.Size(0, -5),
             });  // 创建信息窗口对象
             }

             _this.map.openInfoWindow(infoWindow, point); //开启信息窗口
             } else {
             _this.$message({
             type: 'warning',
             message: result.message
             });
             }
             })*/
          }
        )
      }

    },
    watch: {
      siteInfo(){
        this.getHotMap()
      },
      railInfo(){
        this.getHotMap()
      },

    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .mapWrap
    width: 100%;
    margin 0 auto;
    &:hover .infoButton
      opacity: 1 !important;
    .containerWrap
      height: 100%;
      width: 100%;
      margin 0px auto;
      position: relative;
      .infoButton
        height 20px
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          display: inline-block;
          font-size: 18px;
          cursor pointer
      .colorWrapRack
        position: absolute;
        left 10px;
        top: 10px;
        line-height 22px
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        background-color rgba(255, 255, 255, 0.8)
        .colorlist
          display: inline-block;
          width: 21px;
          height 13px;
        .labelStyle
          font-size: 12px;
          color: #50545D;
          float: right;
          margin-left: 10px;
      #mapContainer
        height: 100%;
        width: 100%;
    .mapTopWrap
      background-color: white;
      overflow: hidden;
      min-height 90px;
      width 240px
      .mapBaseTitle
        color: #3975FE;
        font-size: 12px;
        writing-mode: vertical-lr;
        letter-spacing: 5px;
        float: left;
        padding: 11px;

    .BMapLib_SearchInfoWindow
      height 220px !important
      &::after
        content:""
        position:absolute;
        background-color:white;
        width:150px;
        height:3px;
        bottom:0px;
        left:50px;
        z-index 100

    .BMapLib_bubble_title {
      padding-left: 14px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      background-color white
      border-radius 10px !important
      /*display none !important*/
    }

    .BMapLib_bubble_top, .BMapLib_bubble_close {
      border-radius 10px !important
      border none !important
      background-color #f9f9f9 !important
    }

    #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
      border-radius 10px !important
      /*width 210px !important*/
      min-width 210px !important
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
      border none
    }

    .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
      position absolute
      left 0
      top 20px
    }

    .BMapLib_bubble_content {
      min-height 100px !important
    }

</style>
